<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>（在岗学生管理）考勤查询</title>
    <link rel="stylesheet" href="../../dist/css/layui.css">
    <script src="../../dist/layui.js"></script>
    <script src="../../dist/jquery-1_8_3.js"></script>
    <style>
        fieldset {
            background: rgba(255,255,255,.3);

            border-color: rgba(255,255,255,.6);

            border-style: solid;

            -moz-border-radius: 5px;

            -webkit-border-radius: 5px;

            border-radius: 5px;

            line-height: 30px;

            list-style: none;

            padding: 5px 10px;

            margin-bottom: 2px;

            border-width: 1px;

            border-color: #008000;

            width:97%;
        }
        legend {
            color:#302A2A;

            font: bold 16px/2 Verdana, Geneva, sans-serif;

            text-align: left;
        }
    </style>
</head>
<body>


<!--搜索框-->
<fieldset class="table-search-fieldset">
    <legend>搜索</legend>
    <div style="margin: 10px 10px 10px 10px" id="btn">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="keyword" id="uid" autocomplete="off" placeholder="请输入学号">
                    </div>
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="keyword" id="studentName" autocomplete="off" placeholder="请输入姓名">
                    </div>
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" id="dateChoice" autocomplete="off" placeholder="请选择时间范围" class="layui-input" readonly>
                        </div>
                </div>

                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="submitButton"  data-type="reload" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜索</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<table id="demo" lay-filter="test"></table>


<script>
    $(document).ready(function () {
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //获取当前时间设置选择时间的范围
            var myDate = new Date();
            //拼接当前时间
            var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());

            //初始化选择时间控件
            laydate.render({
                elem: '#dateChoice'
                , type: 'date'
                , range: '~'
                //设置选择最大时间为当前
                , max: maxtime
                , calendar: true
                , btns: ['clear', 'confirm', 'now']
                , done: function (value, date) {
                    //这里时选中后触发事件
                    //value是选中的值
                    var time = value;
                }
            });
        })


        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#demo'
                ,height: "full-20"
                ,url: '/admin/selectStudentAttendance' //数据接口
                ,page: {
                    limit : 10,
                    limits: [5, 10]
                } //开启分页
                ,id:'tableSource'
                ,cols: [[ //表头
                    {field: 'uid', title: '学号', align: "center", width:'12%', sort: true}
                    ,{field: 'name', title: '学生姓名',align: "center", width:'12%', sort: true}
                    ,{field: 'year', title: '学年',align: "center", width:'13%', sort: true}
                    ,{field: 'term', title: '学期',align: "center", width:'10%', sort: true}
                    ,{field: 'dept', title: '部门',align: "center", width:'10%', sort: true}
                    ,{field: 'workName', title: '岗位名称',align: "center", width:'15%'}
                    ,{field: 'employer', title: '用工老师',align: "center", width:'10%'}
                    ,{field: 'date', title: '工作日期',align: "center", width:'10%'}
                    ,{field: 'type', title: '出勤状况',align: "center", width:'8%', templet: '#typeTpl'}
                ]]
            });

            var active = {
                reload: function(){
                    // 学生学号
                    var uid = $('#uid').val();
                    // 学生姓名
                    var studentName = $('#studentName').val();

                    // 查询日期
                    var dateChoice = $('#dateChoice').val();
                    var dateArr = '';
                    var beginDate;
                    var endDate;
                    if (dateChoice !== '') {
                        // 分割日期
                        dateArr = dateChoice.split("~", 2);
                        beginDate = dateArr[0];
                        endDate = dateArr[1];
                    }
                    else {
                        beginDate = '2000-01-01';
                        endDate = "2099-12-31";
                    }

                    //执行重载
                    table.reload('tableSource', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,url: '/admin/selectStudentAttendance'
                        // 异步数据接口的额外参数
                        ,where: {
                            uid: uid.trim(),
                            studentName: studentName.trim(),
                            beginDate: beginDate.trim(),
                            endDate: endDate.trim()
                        }
                    });
                }
            };
            // 搜索框提交
            $('#submitButton').on('click', function(){

                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    });
</script>
<script type="text/html" id="typeTpl">
    {{#  if(d.type == '出勤'){ }}
    <span style="color: mediumseagreen;">{{ d.type }}</span>
    {{# } else if(d.type == '缺勤'){ }}
    <span style="color: orangered;">{{ d.type }}</span>
    {{# } else { }}
    <span style="color: deepskyblue;">{{ d.type }}</span>
    {{#  } }}
</script>
</body>
</html>
